<template>
  <view class="home-page">
    <view class="table-header">
      <view class="table-title">数据统计</view>
    </view>
    <view class="dashboard">
      <!-- 饼图及左侧数据展示区域 -->
      <view class="pie-container">
        <view class="pie-data">
          <view class="data-item">
            <text class="data-label">未验收项目</text>
            <text class="data-value">{{ unacceptedProjects }} 个</text>
          </view>
          <view class="data-item">
            <text class="data-label">项 目 总 数</text>
            <text class="data-value">{{ totalProjects }} 个</text>
          </view>
        </view>
        <view id="acceptance-pie-chart" class="chart-container"></view>
      </view>
      <!-- 柱形图容器 -->
      <view id="cost-bar-chart" class="chart-container"></view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const dataList = ref([]);
const acceptancePieChart = ref(null);
const costBarChart = ref(null);
const totalProjects = ref(0);
const unacceptedProjects = ref(0);

// 计算数据
const calculateDashboardData = () => {
  totalProjects.value = dataList.value.length;
  const acceptedProjects = dataList.value.filter(item => item.isacc).length;
  unacceptedProjects.value = totalProjects.value - acceptedProjects;
  const acceptanceRate = totalProjects.value > 0 ? (acceptedProjects / totalProjects.value * 100).toFixed(2) : 0;

  // 饼图数据
  const pieChartData = [
    { value: acceptedProjects, name: '已完成项目' },
    { value: unacceptedProjects.value, name: '未完成项目' }
  ];

  // 柱形图数据
  const barChartData = dataList.value.map(item => ({
    value: parseFloat(item.cost) || 0,
    projectName: item.projectName,
    siteName: item.siteName,
  }));

  // 初始化饼图
  if (acceptancePieChart.value) {
    const option = {
      title: {
        text: `项目完成度：${acceptanceRate}%`,
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '项目完成情况',
          type: 'pie',
          radius: '50%',
          data: pieChartData
        }
      ]
    };
    acceptancePieChart.value.setOption(option);
  }

  // 初始化柱形图
  if (costBarChart.value) {
    const option = {
      title: {
        text: '各站点项目造价',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          return `项目名称：${params.data.projectName}\n站点名称：${params.data.siteName}\n造价：${params.data.value} 元`;
        }
      },
      xAxis: {
        show: false,
        data: barChartData.map(item => item.siteName)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '造价（元）',
          type: 'bar',
          data: barChartData
        }
      ]
    };
    costBarChart.value.setOption(option);
  }
};

onMounted(() => {
  // 初始化 echarts 实例
  acceptancePieChart.value = echarts.init(document.getElementById('acceptance-pie-chart'));
  costBarChart.value = echarts.init(document.getElementById('cost-bar-chart'));

  // 监听数据更新事件
  uni.$on('updateManagerUploadData', (data) => {
    dataList.value = data;
    calculateDashboardData();
  });
});

onUnmounted(() => {
  // 销毁 echarts 实例
  if (acceptancePieChart.value) {
    acceptancePieChart.value.dispose();
  }
  if (costBarChart.value) {
    costBarChart.value.dispose();
  }
});
</script>

<style scoped>
.home-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 8px;
}

.table-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333333;
}
.dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.chart-container {
  width: 100%;
  height: 400px;
}

.pie-container {
  display: flex;
  align-items: center;
  width: 100%;
}

.pie-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.data-label {
  font-size: 1rem;
  color: #555555;
  width: 80px;
}

.data-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333333;
}

</style>
